<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="w-full bg-[#F6F9FE] py-5">
    <!-- 關於我們內容 -->
    <section class="w-full bg-white max-w-200 mx-auto p-7 px-12">
      <a-form
        ref="userFormRef"
        :model="userForm"
        :label-col="{ span: 3 }"
        autocomplete="off"
        :rules="rules"
        label-align="left"
      >
        <a-form-item label="姓名" name="name">
          <a-input v-model:value="userForm.name" placeholder="請輸入姓名" />
        </a-form-item>
        <a-form-item label="性别" name="sex">
          <a-radio-group v-model:value="userForm.sex">
            <a-radio v-for="item in sexOptions" :key="item.value" :value="item.value">
              {{ item.label }}
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="年龄" name="age">
          <a-input-number
            v-model:value="userForm.age"
            placeholder="請輸入年齡"
            :min="1"
            :max="150"
          />
        </a-form-item>
        <a-form-item label="郵箱" name="email">
          <a-input v-model:value="userForm.email" placeholder="請輸入郵箱" />
        </a-form-item>
        <a-form-item label="個人簽名" name="signature">
          <a-textarea v-model:value="userForm.signature" placeholder="請輸入個人簽名" allow-clear />
        </a-form-item>
      </a-form>
      <div class="flex justify-center gap-5">
        <a-button type="primary" size="large" style="padding: 0 50px" @click="submitForm">
          提交
        </a-button>
        <a-button type="primary" size="large" ghost style="padding: 0 50px" @click="back"
          >取消</a-button
        >
      </div>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { editUserInfoApi } from '@/api'
import { useUserStore } from '@/stores'
import { message, theme } from 'ant-design-vue'
import { validateEmail } from '@/utils/validate'
import type { Rule } from 'ant-design-vue/es/form'
import { type EditUserInfoType, SexEnum } from '@/api/type'

const router = useRouter()
const { token: themeToken } = theme.useToken()

const userFormRef = ref()
const userForm = ref<EditUserInfoType>({
  name: '',
  sex: SexEnum.Male,
  age: '',
  email: '',
  experience: 0,
  signature: '',
})
const sexOptions = [
  { label: '男', value: SexEnum.Male },
  { label: '女', value: SexEnum.Female },
]

const rules: Record<string, Rule[]> = {
  name: [{ required: true, message: '請輸入您的姓名！', trigger: 'blur' }],
  sex: [{ required: true, message: '請選擇您的性别！', trigger: 'blur' }],
  age: [{ required: true, message: '請輸入您的年齡！', trigger: 'blur' }],
  email: [{ required: true, validator: validateEmail, trigger: 'blur' }],
  experience: [{ required: true, message: '請輸入您的工作經驗！', trigger: 'blur' }],
  signature: [{ required: true, message: '請輸入您的個人簽名！', trigger: 'blur' }],
}

// 提交表單
const submitForm = () => {
  const { setUser } = useUserStore()
  userFormRef.value.validate().then((res: EditUserInfoType) => {
    console.log(res)
    editUserInfoApi(res).then(() => {
      message.success('更新成功')
      // 更新用户信息
      setUser()
      userFormRef.value.resetFields()
    })
  })
}

const back = () => {
  router.back()
}

onMounted(() => {
  const { user } = useUserStore()
  if (user?.id) {
    userForm.value = {
      name: user.name,
      sex: user.sex,
      age: user.age,
      email: user.email,
      experience: user.experience,
      signature: user.signature,
    }
  }
})
</script>

<style scoped>
.primary-color {
  color: v-bind('themeToken.colorPrimary');
}
.ant-input,
.ant-input-affix-wrapper,
.ant-input-number,
:deep(.ant-input-number-input) {
  width: 100%;
  height: 48px !important;
  line-height: 48px;
  border-radius: 10px;
}
.ant-input-affix-wrapper-textarea-with-clear-btn {
  height: 100px !important;
}
:deep(textarea) {
  resize: none !important;
}
.w-full .ant-form-item {
  width: 100%;
}
</style>
